<template>
	<view class="home">
		<view class="status_bar"><!-- 这里是状态栏 --></view>

		<view class="main">
			<!-- 顶部个人信息 -->
			<view class="topbox">
				<!-- 左边部分 -->
				<view class="left">
					<image class="img" :src="!!userinfo.wx_img?userinfo.wx_img:'http://img.cpgm.cc/panda/static/login/logo.png'"
						mode="widthFix"></image>
					<view class="word">
						<text>{{!!userinfo.wx_nickname?userinfo.wx_nickname:'潮玩新人'}}</text>
						<view>
							<text>战斗力</text>{{userinfo.fighting?userinfo.fighting:'0'}}
						</view>
					</view>
				</view>
				<!-- 右边部分 -->
				<view class="right">
					<view class="outside top1" @click="$p.navto('/pages/my/my_crystal')">
						<text>水晶</text>
						<text>{{userinfo.crystal?userinfo.crystal:'0'}}</text>
					</view>
					<view class="outside top2" @click="$p.navto('/pages/my/my_silver')">
						<text>银元</text>
						<text>{{userinfo.silver?userinfo.silver:'0.00'}}</text>
					</view>
				</view>
			</view>

			<!-- 中间任务部分 -->
			<view class="center">
				<view class="character">
					<image :src=" 'http://img.cpgm.cc/panda/static/home/' + list[userinfo.level - 1].img " mode="widthFix" />
				</view>
				<view class="c_left">
					<image @click="$p.navto('/pages/index/notice')" src="http://img.cpgm.cc/panda/static/home/icon1.png" mode="widthFix" />
					<image @click="giveshow = true" src="http://img.cpgm.cc/panda/static/home/icon2.png" mode="widthFix" />
					<image @click="$p.navto('/pages/home/newstrategy')" src="http://img.cpgm.cc/panda/static/home/icon3.png" mode="widthFix" />
					<image @click="$p.navto('/pages/home/bounds')" src="http://img.cpgm.cc/panda/static/home/icon4.gif" mode="widthFix" />
				</view>
				
				<view class="c_right">
					<image @click="$p.navto('/pages/index/rank')" src="http://img.cpgm.cc/panda/static/home/icon5.png" mode="widthFix" />
					<image @click="popshow = true" src="http://img.cpgm.cc/panda/static/home/icon6.png" mode="widthFix" />
					<image @click="$p.navto('/pages/land/newtask')" src="http://img.cpgm.cc/panda/static/home/icon7.png" mode="widthFix" />
					<image @click="$p.navto('/pages/invitebox/inviteindex')" src="http://img.cpgm.cc/panda/static/home/icon9.png" mode="widthFix" />
				</view>

				<!-- 底部按钮 -->
				<view class="btnbox">
					<view class="outbtn" @click="$p.navto('/pages/forest/forest')">
						<image src="http://img.cpgm.cc/panda/static/home/h_l.png" mode="widthFix" />
					</view>
					<view class="outbtn" @click="$p.navto('/pages/index/improve')">
						<image src="http://img.cpgm.cc/panda/static/home/h_r.png" mode="widthFix" />
					</view>
				</view>
			</view>
		</view>


		<!-- 银元转赠 -->
		<u-mask :show ="giveshow">
			<view class="playbox" :class="[giveshow?'playboxac':'']">
				<image class="closed2" @click="giveshow = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
				<view class="content">
					<image class="yb" src="http://img.cpgm.cc/panda/static/self/bigyb.png" mode="widthFix" />
					<h3>银元转赠</h3>
					<p class="explain">我的银元 <text>{{userinfo.jewel}}</text>个</p>
					<view class="piece">
						<text>好友ID</text>
						<input type="number" @blur="blurchange()" maxlength="6" v-model="invite_code" placeholder="请输入好友ID"
							placeholder-class="ipttxt" />
						<view class="people">
							<image :src="pimg" mode="" />
							<text>{{name}}</text>
						</view>
					</view>
					<view class="piece">
						<text>赠送数量</text>
						<input type="number" @input="inputchange()" v-model="numdata" placeholder="请输入赠送数量" placeholder-class="ipttxt" />
					</view>
					<view class="piece">
						<text>手续费</text>
						<input type="number" disabled="disabled" v-model="servicecharge"
								placeholder-class="ipttxt" />
					</view>
					<p class="tips">请确认接收人ID，赠送后无法追回 <br>
							平台禁止银元倒卖出售，一经发现严肃处理</p>

					<view class="allmoney">合计银元：<text>{{amount}}</text>个</view>
					<view class="button" @click="giveGold">立即转赠</view>
				</view>
			</view>
		</u-mask>

		<!-- 是否确认赠送 -->
		<u-mask :show="sureshow">
			<view class="warp">
				<view class="givebox">
					<h3>银元转赠</h3>
					<view class="m_content2">
						<p class="centerdd">赠送后无法退回,请谨慎操作</p>
						<p class="centerdd">确定向ID{{invite_code}}的用户赠送{{numdata}}枚银元吗</p>
					</view>
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
						class="button" @click="givegoldsure()">确认</u-button>
				</view>
				<image class="closed" @click="sureshow = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
			</view>
		</u-mask>





		<!-- vs -->
		<u-mask :show="popshow">
			<view class="p_drawer" :class="[popshow ? 'drawer-show' : 'drawer-visible']">
				<image class="pkimg" src="http://img.cpgm.cc/panda/static/mask/zhanli.png" mode="widthFix" />
				<view class="close">
					<view class="p_right" @click="wfshow = true">
						<text>玩法</text>
					</view>
					<image @click="popshow = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
				</view>
				<view class="t_top">
					<view class="p_tab">
						<view class="tab_item" :class="[stat == item.id ? 'active' : '']"
							v-for="(item, index) in tablist" :key="index" @click="tabchange(item.id)">{{ item.name }}
						</view>
					</view>
				</view>
				<scroll-view scroll-y class="ranklist">
					<view class="r_item" v-for="(item, index) in rank[stat]" :key="index">
						<view class="flex">
							<view class="lv">
								<image v-if="index < 3"
									:src="index == 0 ? 'http://img.cpgm.cc/panda/static/public/one.png' : index == 1 ? 'http://img.cpgm.cc/panda/static/public/two.png' : 'http://img.cpgm.cc/panda/static/public/three.png'"
									mode="widthFix" />
								<text v-else>{{ index + 1 }}</text>
							</view>
							<view class="header" @click="seeinfo(item)">
								<image
									:src="item.wx_img ? item.wx_img : 'http://img.cpgm.cc/panda/static/login/logo.png'"
									mode="" />
							</view>
							<text class="phone">{{ !!item.wx_nickname ? item.wx_nickname : '潮玩新人' }}</text>
						</view>
						<view class="right">
							<text>战力：{{item.fighting}}</text>
							<text class="mart5" v-if="stat == 2" >银元分红：+ {{getsj(index+1)}}</text>
							<text class="mart5" v-if="stat == 3" >银元分红：+{{getsj2(index+1)}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-mask>
		


		<!-- 排行榜玩法 -->
		<u-mask :show="wfshow">
			<view class="warp">
				<view class="wfbox">
					<h3>排行玩法</h3>
					<view class="whitebox">
						<p>战力排行榜，战力越高，奖励越丰厚 ，不同的榜单有不同的奖励</p>
						<p>榜单结算时间： <text> 日榜23:59结算当日收益</text> <br> <text>周榜每周日23:58结算本周收益</text> </p>
					</view>
					<view class="r_bot">
						<view class="r_title">
							<text>瓜分银元</text>
							<text>日榜排行</text>
							<text>周榜排行</text>
						</view>
						<view class="r_list">
							<view>
								<text>第1名</text>
								<text>第2名</text>
								<text>第3名</text>
								<text>第4-10名</text>
								<text>第11-20名</text>
							</view>
							<view>
								<text>25银元</text>
								<text>18银元</text>
								<text>10银元</text>
								<text>5银元</text>
								<text>5银元</text> 
							</view>
							<view>
								<text>200银元</text>
								<text>100银元</text>
								<text>50银元</text>
								<text>20银元</text>
								<text>20银元</text>
							</view>
						</view>
					</view>
				</view>
				<image class="closed" @click="wfshow = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
			</view>
		</u-mask>


		<!-- 领取水晶成功弹窗 -->
		<u-mask :show="rewardshow">
			<view class="warp">
				<view class="rewardbox">
					<image class="sjimg" src="http://img.cpgm.cc/panda/static/index/1.png" mode="widthFix" />
					<view class="m_content2">
						<p class="rwtit">恭喜您成功领取</p>
						<p class="rwsj"> <text>{{rewardsj}}</text>水晶</p>
						<!-- <p class="centerdd">当前境界为{{list[userinfo.level - 1].name}}</p> -->
					</view>
					<!-- <view class="button quit" @click="sureshow = false">取消</view> -->
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
						class="button confirm rwbtn" @click="rewardshow = false" >开心收下</u-button>
				</view>
				<image class="closed" @click="rewardshow = false" src="http://img.cpgm.cc/panda/static/my/cha.png" mode="widthFix" />
			</view>
		</u-mask>


		<u-mask :show="noticeshow">
			<view class="warp">
				<view class="noticebox">

				</view>
			</view>
		</u-mask>

		<u-mask :show="noticeshow">
			<view class="warp">
				<view class="maskbox">
					<image class="topimg" src="../../static/home/lingd.png" mode="widthFix" />
					<view class="wightbg">
						<p>{{notice_content.title}}</p>
						<view class="n_con">
							{{notice_content.content}}
						</view>
						<view class="mask_btn button" @click="noticeshow = false">我知道了</view>
					</view>
				</view>
				<image class="n_closed" @click="noticeshow = false" src="../../static/public/close.png" mode="widthFix" />
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				giveshow: false,
				popshow: false,
				tablist: [
					{
						id: 1,
						name: '战力总榜',
						isrequest:true,
					},
					{
						id: 2,
						name: '周提升榜',
						isrequest:false,
					},
					{
						id: 3,
						name: '日提升榜',
						isrequest:false,
					}
				],
				stat: 1,
				wfshow: false,
				userinfo: uni.getStorageSync('userinfo'),
				numdata: '', //赠送水晶数量
				invite_code: '', //赠送好友ID
				servicecharge: 0,
				danbao: '', //担保人id
				selecet: false, //是否选择
				selist: '', //担保人列表
				rate: '',
				amount: 0,
				charge: '',
				sureshow: false,
				giveshow2:false,
				levelcha:0,
				level:[0,0,1200,3000,6000,12000,22500,36000,60000,100000,200000,400000,800000,1500000,3000000],
				receive:[0,2,3,5,8,16,30,45,80,120,250,500,1000,2000,4500],
				list:[
					{
						id:1,
						img:'1.png',
						name:'士兵熊猫',
					},
					{
						id:2,
						img:'2.png',
						name:'音乐熊猫',
					},
					{
						id:3,
						img:'3.png',
						name:'恐龙熊猫',
					},
					{
						id:4,
						img:'4.png',
						name:'宇航员熊猫',
					},
					{
						id:5,
						img:'5.png',
						name:'芭比熊猫',
					},
					{
						id:6,
						img:'6.png',
						name:'花木兰熊猫',
					},
					{
						id:7,
						img:'7.png',
						name:'女巫熊猫',
					},
					{
						id:8,
						img:'8.png',
						name:'牛魔王熊猫',
					},
					{
						id:9,
						img:'9.png',
						name:'悟空熊猫',
					},
					{
						id:10,
						img:'10.png',
						name:'逍遥生',
					},
					{
						id:11,
						img:'11.png',
						name:'羽灵神',
					},
					{
						id:12,
						img:'12.png',
						name:'魔主',
					},
					{
						id:13,
						img:'13.png',
						name:'天外飞仙',
					},
					{
						id:14,
						img:'14.png',
						name:'三界之主',
					},
				],
				rank:{
					1:[],
					2:[],
					3:[]
				},
				rewardshow:false,
				rewardsj:0,
				name:'',
				pimg:'',
				noticeshow:false,
				notice_content:'',
			};
		},
	onShow() {
		this.getUserInfo();
		this.fightList(1);
	},
	onLoad(){
		this.getNotice();
	},
	methods: {
		// 获取个人信息
		getUserInfo(){
			this.$getUserInfo.getUserInfo((res)=>{
				if(res.code == 1) {
					this.userinfo = res.data
					this.levelcha = this.level[res.data.level+1] - res.data.fighting
					if(this.levelcha <= 0) {
						this.levelcha = 0
					}
					this.charge = res.data.silver_rate
					uni.setStorageSync('invite_code', res.data.invite_code)
				}
			})
		},

		getsj(index){
			if(index == 1) {
				return '200'
			}else if(index == 2) {
				return '100'
			}else if(index == 3) {
				return '50'
			}else if( 3<index < 11) {
				return '20'
			}else if( 10<index < 21) {
				return '20'
			}
		},

		getsj2(index){
			if(index == 1) {
				return '25'
			}else if(index == 2) {
				return '18'
			}else if(index == 3) {
				return '10'
			}else if( 3<index < 11) {
				return '5'
			}else if( 10<index < 21) {
				return '5'
			}
		},

		async getNotice(){
			let res = await this.$http.index.getNotice();
			if(res.data) {
				this.notice_content = res.data;
				this.noticeshow = true
			}
		},

		// 判断返回时间戳是否为当天
		checkTimeInToday(timestamp){
			if (new Date(Number(timestamp)).toDateString() === new Date().toDateString()) {
				console.log('当天');
			} else {
				console.log('其他时间');
			} 

			// if (new Date(Number(item.PostTime)* 1000).toDateString() === new Date().toDateString()) {
			// 	alert('当天');
			// 	} else if (new Date(Number(item.PostTime)* 1000) < new Date()){
			// 	alert('之前时间');m
			// }
		},
		
		// 获取战力排行榜
		async fightList(type){
			let res = await this.$http.index.fightList({
				type:type
			}) 
			if(res.code == 1) {
				this.rank[type] = res.data
				this.tablist[type-1].isrequest = true
			}
		},

		advto(){
			if(!!this.userinfo.is_crystal){
				this.$u.toast('今日已领取')
			}else{
				// this.$p.navto('/pages/home/advpage')
				this.getLvCrystal();
			}
		},

		// 看广告领取每日称谓奖励
		async getLvCrystal(){
			let res = await this.$http.index.getLvCrystal();
			if(res.code == 1) {
				this.rewardsj = res.crystal
				this.rewardshow = true
				this.getUserInfo();
			}else {
				this.$u.toast(res.msg)
			}
		},

				// 失去焦点时触发
		blurchange(){
			if(this.invite_code.length == 6) {
				this.getUInfo()
			}else {
				this.$u.toast('请输入正确的ID')
			}
		},

		async getUInfo(){
			let res = await this.$http.index.getUInfo({
				invite_code:this.invite_code
			})
			if(res.code == 1) {
				console.log(res);
				this.pimg = res.data.img
				this.name = res.data.nickname
			}else {
				this.$u.toast(res.msg)
			}
		},
		
		// tab切换
		tabchange(id) {
			this.stat = id
			if(!this.tablist[id-1].isrequest) {
				this.fightList(id)
			}
		},

		// 打开选择框
		handel(){
			this.selecet = !this.selecet
		},

		phonenum(phone){
			let reg = /^(\d{3})\d{4}(\d{4})$/;
			return phone.replace(reg, "$1****$2");
		},

		// 选择担保人
		selecttrue(v){
			// console.log(v);
			this.danbao = v
			this.selecet = false
		},

		// 获取担保人列表
		async shoperList(){
			let res = await this.$http.index.shoperList();
			this.selist = res.data
		},

		// 监听用户输入水晶数量逻辑
		inputchange(e){
			let change =  Number(this.userinfo.crystal) / (1 + Number(this.charge)) 
			// 最大可赠送数量
			change = Math.floor(change)

			if(this.numdata > change) {
				this.$u.toast('赠送数量不能大于总计数量')
				this.$nextTick(() => {
					this.numdata = change
				});
			}
			this.$nextTick(()=>{
				this.numdata = this.numdata
				if(this.numdata == '' || this.numdata == 'null' || this.numdata == 0){
					this.servicecharge = 0
					this.amount = 0
				}else {
					this.servicecharge = (this.numdata * this.charge).toFixed(2) 
					this.amount =  (Number(this.numdata) + Number(this.servicecharge)).toFixed(2) 
					if(isNaN(this.amount)) {
						this.amount = 0
					}
					if(isNaN(this.servicecharge)) {
						this.servicecharge = 0
					}
				}
			})
		},

		// 赠送好友水晶
		async giveGold() {
			if (this.numdata == '' || this.numdata == null) {
				this.$u.toast('请输入赠送水晶数量')
			} else if (this.invite_code == '' || this.invite_code == null) {
				this.$u.toast('请输入赠送的好友ID')
			} else {
				this.sureshow = true
			}
		},

		// 赠送好友水晶
		async givegoldsure() {
			let res = await this.$http.index.giveSilver({
				invite_code: this.invite_code,
				num: this.numdata,
				trader: this.danbao,
			})
			this.$u.toast(res.msg)
			if (res.code == 1) {
				this.getUserInfo()
				this.giveshow = false
				this.sureshow = false
			}
		},

	}
	}
</script>

<style lang="less">
.home {
	background: linear-gradient(180deg, #005FFE 0%, #2BD2F7 34%, #58F6D9 59%, #28E2F5 70%, #8B66FC 100%);
	// #ifdef APP-PLUS
	min-height: 100vh;
	// #endif
	// #ifdef H5
	min-height: calc(100vh - 75px);
	// #endif
}

.main {
	padding: 4vh 10px 10px;
}


// 顶部个人信息
.topbox {
	padding: 10px;
	background: #E7F6FE linear-gradient(360deg, #FFFFFF 0%, rgba(167,167,167,0.9) 100%);
	box-shadow: inset 0px -4px 0px 0px rgba(0,0,0,0.3), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: space-between;


	// 左边部分
	.left {
		display: flex;
		align-items: center;

		image {
			width: 60px;
			margin-right: 10px;
			border-radius: 5px;
		}

		.word {
			display: flex;
			flex-direction: column;

			text {
				color: #000;
				font-size: 16px;
				font-weight: 600;
			}

			view {
				background: rgba(0,0,0,0.5);
				border-radius:4px;
				width: fit-content;
				height: 25px;
				line-height: 25px;
				display: flex;
				align-items: center;
				margin-top: 5px;
				padding-right: 5px;
				color: #fff;
				font-size: 12px;
				text {
					display: block;
					height: 25px;
					padding: 0 5px;
					line-height: 25px;
					width: fit-content;
					background: linear-gradient(180deg, #FF850F 0%, #FF3B00 19%, #FF4100 100%);
					border-radius: 4px;
					font-size: 12px;
					color: #fff;
					margin-right: 4px;
				}
			}
		}
	}
}


.center {
	margin-top: 30px;
	position: relative;

	.title {
		width: 60%;
		height: 30px;
		background: linear-gradient(90deg, #0A52FE 0%, #1380FE 100%);
		border-radius: 33px;
		color: #fff;
		font-size: 14px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;

		text {
			font-size: 18px;
			font-weight: 500;
		}
	}

	.character {
		margin-top: 10%;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 90%;
			margin-top: 10%;
		}
	}
}

.c_left {
	position: absolute;
	left: 0;
	top: 0%;
	display: flex;
	flex-direction: column;
	align-items: center;

	image {
		width: 60px;
		margin: 10px 0;
	}
}

.c_right {
	position: absolute;
	right: 0px;
	top: 0%;
	display: flex;
	flex-direction: column;
	align-items: center;

	image {
		width: 60px;
		margin: 10px 0;
	}
}

.btnbox {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 95%;
	margin: 20px auto;

	.outbtn {
		width: 48%;
		image {
			width: 100%;
		}
	}

	.button {
		width: 100%;
		height: 50px;
		margin-top: 10px;
	}
}


.leftbtn {
	position: relative;
	background: url('http://img.cpgm.cc/panda/static/public/btn4.png');
	background-size: 100% 100%;
	border-radius: 7px;

	image {
		position: absolute;
		left: 6%;
		width: 25px;
	}

	view {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-left: 10px;

		text:nth-child(1) {
			color: #343434;
			font-size: 16px;
			font-weight: 600;
		}

		text:nth-child(2) {
			color: #343434;
			font-size: 12px;
			zoom: 0.85;
		}
	}
}

.rightbtn {
	position: relative;
	background: url('http://img.cpgm.cc/panda/static/public/btn4.png');
	background-size: 100% 100%;

	image {
		position: absolute;
		left: 5%;
		width: 35px;
	}

	view {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-left: 10px;

		text:nth-child(1) {
			color: #343434;
			font-size: 14px;
			font-weight: 600;
		}

		text:nth-child(2) {
			color: #343434;
			font-size: 12px;
			zoom: 0.85;
		}
	}
}

// 右边部分
.right {
	width: fit-content;
	display: flex;
	flex-direction: column;

	.outside {
		display: flex;
		align-items: center;
		background: #FFFFFF linear-gradient(90deg, #046AFE 0%, #0469FD 100%);
		border-radius: 4px;
		margin: 2px 0;
		padding: 5px 10px;
		line-height: 20px;

		image {
			width: 15px;
		}

		text {
			width: fit-content;
			color: #fff;
			font-size: 12px;
			font-weight: 500;
		}

		text:nth-child(3) {
			color:#fff	;
			font-weight: 500;
			margin-left: 5px;
		}
	}
}



// 转赠弹窗

.givebox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 45px 0px rgba(255,255,255,0.5), inset -5px -5px 45px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 15px;
	background-size: 100% 100%;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;

	h3 {
		position: relative;
		color: #000000;
		font-size: 20px;
		width: 50%;
		text-align: center;
		z-index: 2;
	}
	h3::after {
		content: '';
		width: 100%;
		height: 30px;
		background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
		background-size: 100% auto;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.button {
		width: 80%;
		height: 55px;
		color: #B73800;
		margin: 0 auto;
		margin-top: 20px;
		background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
		background-size: 100% 100%;
		font-weight: 600;
	}
}


.button2 {
	color: #239D4C;
	text-decoration: underline;
	font-size: 14px;
	font-weight: 600;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	image {
		width: 13px;
		margin-left: 5px;
	}

	.seposabox {
		position: absolute;
		top: 100%;
		left: 0;
		transform: translateX(-32%);
		padding: 4px;
		width: 74px;
		height: 100px;
		background: #FFFFFF;
		border: 1px solid #FEE1C3;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;

		view {
			color: #696969;
		}
	}
}

.danb {
	flex: 1;
}

.m_list {
	margin-top: 10px;
}

image {
	width: 12px;
}

.sjbox {
	position: relative;
	display: inline-block;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 10px;
	margin: 10px auto 0;
	background: #fff;
	border-radius: 10px;

	image {
		width: 15px;
		margin-right: 10px;
	}

	text {
		font-size: 12px;
	}
}

.m_list {
	margin-top: 10px;
}

.m_item {
	width: 100%;
	box-sizing: border-box;
	padding: 15px 10px;
	background: #fff;
	border-radius: 5px;
	margin: 5px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #FEE1C3;

	text {
		width: 30%;
	}
	input {
		flex: 1;
	}
}

.closed {
	width: 25px;
	position: absolute;
	right: 10px;
	top: 10px;
}

.popbox {
	background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
	height: 300px;
	padding: 15px;
}




// pop弹窗
.popbox {
	background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
	height: 300px;
	padding: 15px;
}

.pkimg {
	width: 40%;
	position: absolute;
	top: 2%;
	transform: translateY(-70%);
	left: 30%;
}

.p_drawer {
	position: fixed;
	z-index: 10007;
	width: 100%;
	left: 0;
	bottom: -62vh;
	background: url('http://img.cpgm.cc/panda/static/mask/beij.png');
	background-size: 100% auto;
	height: 62vh;
	padding: 15px;
	border-radius: 20px 20px 0 0;
}

.ranklist {
	height: calc(50vh - 20px);
	padding: 10px 0;
}

.drawer-show {
	transform: translateY(-100%);
	transition: all 0.25s linear;
}

.drawer-visible {
	transition: all 0.25s linear;
	transform: translate3D(0px, 0px, 0px) !important;
}

.t_top {
	display: flex;
	align-items: center;
	margin-top: 5px;
}

.active {
	background: #338F88 !important;
	color: #fff !important;
}

.p_tab {
	width: 100%;
	display: flex;
	align-items: center;
	margin-top: 10px;

	.tab_item {
		width: 32%;
		height: 35px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 5px;
		color: rgba(37, 37, 37, 0.71);
	}
}

.close {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	image {
		width: 25px;
	}
}

.p_right {
	display: flex;
	align-items: center;
	margin-right: 15px;
	
	text {
		color: #1D1E24;
		font-size: 12px;
		text-decoration: underline;
	}
}



.r_item {
	width: 100%;
	padding: 12px;
	background: rgba(255,255,255,0.8);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.flex {
	display: flex;
	align-items: center;
	flex: 1;
}

.lv {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;

	image {
		width: 100%;
	}

	text {
		font-size: 20px;
		color: #343434;
		font-weight: 600;
		width: 100%;
		text-align: center;
	}
}

.phone {
	// width: 110px;
	// white-space: nowrap;/*不允许换行*/
	// overflow: hidden;/*超出隐藏*/
	// text-overflow: ellipsis;/*文本超出三点代替*/
	color: #343434;
	font-size: 13px;
	font-weight: 600;
}

.right {
	display: flex;
	flex-direction: column;

	text {
		color: #FF456B;
		font-size: 12px;
	}
}

.header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 10px;

	image {
		border-radius: 50%;
		width: 50px;
		height: 50px;

	}
}



// 玩法 弹窗

.wfbox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 45px 0px rgba(255,255,255,0.5), inset -5px -5px 45px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	border-radius: 19px;
	padding: 15px;

	h3 {
		position: relative;
		color: #000000;
		font-size: 20px;
		width: 50%;
		text-align: center;
		z-index: 2;
		margin: 0 auto;
	}
	h3::after {
		content: '';
		width: 100%;
		height: 30px;
		background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
		background-size: 100% auto;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
}

.whitebox {
	background: #fff;
	padding: 10px;
	margin-top: 10px;

	p {
		color: #000;
		font-size: 14px;
		font-weight: 600;
	}

	p:nth-child(2) {
		font-size: 12px;
		color: #131314;
		margin-top: 5px;
		
		text {
			opacity: 0.8;
			font-weight: normal;
		}
	}
}

.r_bot {
	background: #FFFFFF;
	border-radius: 5px;
	padding: 10px;
	margin-top: 10px;
}

.r_title {
	display: flex;
	align-items: center;
	justify-content: space-between;

	text {
		width: 33%;
		text-align: center;
		color: #696969;
		font-weight: 600;
	}
}

.r_list {
	display: flex;
	align-items: center;
	justify-content: space-between;

	view {
		width: 33%;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;

		text {
			color: #333333;
			font-weight: 600;
			margin: 4px 0;
		}
	}
}




// 转赠提示
.m_content2 {
		width: 100%;
		font-size: 12px;
		font-weight: bold;
		color: #fff;
		line-height: 20px;
		padding: 10px;

		p {
			color: #fff;
			font-size: 14px;
			text-align: left;
			line-height: 20px;
		}
	}

	.maskClose {
		position: absolute;
		bottom: -50px;
		width: 34px;
		height: 34px;
	}

	.know {
		width: 109px;
		height: 40px;
		background: linear-gradient(90deg, #8BECFF 0%, #F2ACFF 38%, #FDD258 100%);
		border-radius: 7px;
		color: #151515;
		font-size: 14px;
		font-weight: 600;
		margin-top: 20px;
	}

	.centerdd {
		text-align: center !important;
		margin: 10px 0;
		color: #131314 !important;
	}
	
.choosetips {
	color: #fff;
	font-size: 12px;
	margin-bottom: 5px;
}

.confirm {
	width: 60%;
	height: 45px;
	color: #fff;
	margin: 0 auto;
	margin-top: 20px;
	background: #000000 !important;
	border-radius: 21px;
}

.mart5 {
	margin-top: 5px;
}



// 成功领取弹窗
.rewardbox  {
	background: linear-gradient(180deg, #FAD9BF 0%, #FFFFFF 100%);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	border-radius: 18px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sjimg {
	width: 100px;
	// position: absolute;
	// top: -15%;
	// left: 50%;
	// transform: translateX(-50%);
	margin: 0 auto;
	margin-top: -20%;
}

.rwtit {
	color: #000000 !important;
	font-size: 25px !important;
	text-align: center !important; 
}
.rwsj {
	text-align: center !important;
	color: #696969 !important;
	font-size: 16px;

	text {
		font-size: 40px;
		font-weight: bold;
		color: #343434;
		line-height: 72px;
		background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.rwbtn {
	background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%) !important;
	border-radius: 5px;
}



// 转赠


.playbox {
	width: 100%;
	position: absolute;
	left: 0%;
	bottom: -50vh;
	background: url('http://img.cpgm.cc/panda/static/mask/bbg.png');
	background-size: 100% 100%;
	transition: all 0.3s linear;

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;

		.yb {
			width: 32%;
			margin-top: -18%;
		}

		h3 {
			position: relative;
			color: #000000;
			font-size: 20px;
			width: 50%;
			text-align: center;
			z-index: 2;
		}

		.explain {
			color: #333333;
			font-size: 14px;
			margin: 10px 0;
			text {
				font-weight: 600;
			}
		}

		h3::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.piece {
			width: 100%;
			background: #FFFFFF;
			border-radius: 9px;
			padding: 15px;
			display: flex;
			align-items: flex-start;
			margin: 5px 0;
			position: relative;

			text {
				color: #1D1E24;
				font-size: 14px;
				font-weight: 600;
				margin-right: 10px;
			}

			input {
				text-align: left;
				flex: 0.9;
				margin-left: 10px;
			}
		}

		.allmoney {
			margin-top: 20px;
			color: #696969;
			font-size: 14px;
			font-weight: 600;

			text {
				color: #000;
			}
		}

		.button {
			height: 68px;
			width: 100%;
			background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
			background-size: 100% 100%;
			color: #B73800;
			font-size: 18px;
			font-weight: 600;
			margin-top: 10px;
		}

	}
	.closed2 {
		position: absolute;
		width: 25px;
		top: 8%;
		right: 15px;
	}

	.tips {
		width: 100%;
		text-align: left;
		color: #696969;
		font-size: 12px;
		margin-top: 5px;
	}
}

.playboxac {
	bottom:0 !important;
}

.top1 {
	background: url('http://img.cpgm.cc/panda/static/home/top1.png') !important;
	background-size: 100% 100% !important;
}
.top2 {
	background: url('http://img.cpgm.cc/panda/static/home/top2.png') !important;
	background-size: 100% 100% !important;
}

.people {
	position: absolute;
	right: 10px;
	width: fit-content;
	display: flex;
	align-items: center;
	max-width: 200px;

	image {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 5px;
	}

	text {
		flex: 1;
		color: #222;
		font-weight: 600;
		font-size: 12px;
	}
}








// 弹窗

.maskbox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 47px 0px rgba(255,255,255,0.5), inset -5px -5px 47px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 15px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.topimg {
		width: 56%;
		margin: 0 auto;
		margin-top: -36%;
	}

	h3 {
		color: #000000;
		font-size: 26px;
	}

	.wightbg {
		width: 100%;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 9px;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -4%;

		p {
			position: relative;
			color: #000000;
			font-size: 20px;
			font-weight: 600;
			z-index: 2;
			padding: 0 10px;
		}

		p::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.n_con {
			color: #333333;
			font-size: 15px;
			margin: 20px 0;
			text-align: center;
			line-height: 22px;
		}
	}
}

.mask_btn {
	width: 60%;
	height: 58px;
	background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
	background-size: 100% 100%;
	margin: 0 auto;
	color: #B73800;
	font-weight: 600;
	font-size: 18px;
}

.n_closed {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 20px;
	width: 30px;
}



</style>